<script>
export default {
  data() {
    return {
      // 需要在 data 中定义，否则 watch 无法监听某个数据
      search_data: ""
    }
  },
  watch: {
    // 监听 search_data 的变化
    search_data(new_word, old_word) {
      this.$emit("updateSearch", new_word)
    }
  }
};
</script>

<template>
  <div>搜索</div>
  <!-- search_data 表示输入框内的内容，当内容变化时，将会将数据实时更新到 search_data 变量 -->
  <!-- 之后在 watch 中对 search_data 进行监视，当发生变化时立即执行某个功能，在这里就是搭配组件传递数据（子组件向父组件）使用 -->
  <!-- 将更新后的数据发送到父组件，在父组件中完成数据的动态更新，即为组件传递数据搭配 v-model 的用法 -->
  <input type="text" v-model="search_data">
</template>

<style scoped>

</style>